// SPDX-License-Identifier: GPL-3.0-or-later

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Fk
import Fk.Components.LunarLTK
import Fk.Components.Common

ColumnLayout {
  id: root
  anchors.fill: parent
  signal finish()

  property var extra_data: ({ name: "", owner: Self.id, data: { list_names: [], list_cards: [], column: 2 } })

  property var listNames: root.extra_data.data.list_names
  property var listCards: root.extra_data.data.list_cards

  BigGlowText {
    Layout.fillWidth: true
    Layout.preferredHeight: childrenRect.height + 4

    text: Lua.tr(extra_data.name)
  }

  Flickable {
    id : cardArea
    ScrollBar.horizontal: ScrollBar {}
    flickableDirection: Flickable.VerticalFlick
    Layout.preferredWidth: Math.min(root.width - root.width % 97)
    anchors.top: title.bottom
    anchors.topMargin: 20
    Layout.fillHeight: true
    Layout.alignment: Qt.AlignHCenter
    clip: true

    GridLayout {
      id: gridLayout
      columns: root.extra_data.data.column
      width: parent.width
      clip: true

      Repeater {
        id: cardAreaRepeater
        model: listCards

        delegate: Item {
          id: listArea
          width: (parent.width - 20) / root.extra_data.data.column
          height : 150
          clip : true
          // border.color: "#FEF7D6"
          // border.width: 3
          // radius : 3
          // color: "#88EEEEEE"

          property string listName : listNames[index]?? ""
          property int cardNum : modelData.length
          Rectangle {
            id: areaRect
            anchors.centerIn: parent
            width: parent.width
            height: parent.height
            color: "#20211c"
            opacity: .53
          }

          RowLayout {
            id : cardAreaRect
            width : parent.width - 20
            height : parent.height - 20
            anchors.centerIn: parent
            spacing: (cardNum < (7 / root.extra_data.data.column)) ? -28 :  (this.width - 100) / (cardNum - 1) - 100
            clip : true
            Repeater {
              id: cardRepeater
              model: modelData

              CardItem {
                id: cardItem
                draggable: true
                Component.onCompleted: {
                  let data = {}
                  if (typeof modelData === "string") {
                    data.cid = 0;
                    data.name = modelData;
                    data.suit = '';
                    data.number = 0;
                    data.color = '';
                  } else if (typeof modelData === "object")  {
                    data = Lua.call("GetCardData", modelData.cid);
                    for (let k in modelData) {
                      data[k] = modelData[k]
                    }
                  } else {
                    data = Lua.call("GetCardData", modelData);
                  }
                  setData(data);
                }
              }
            }
            Component.onCompleted: {
              for (let i = 0; i < cardNum; i++) {
                const curCard = cardRepeater.itemAt(i);
                curCard.origX = curCard.x;
                curCard.origY = 0;
                curCard.goBack();
              }
            }
          }

          Rectangle {
            id : nameArea
            anchors.bottom: parent.bottom
            width : parent.width
            height : parent.height * 0.25
            color: Qt.rgba(0, 0, 0, 0.7)
            opacity: 0.7

            GlowText {
              id : nameText
              text: Util.processPrompt(listName) + " (" + cardNum.toString() + ")"
              font.family: Config.libianName
              font.pixelSize: 27
              font.bold: true
              color: "#FEF7D6"
              glow.color: "#845422"
              glow.spread: 0.5
              anchors.centerIn: parent
            }
          }
        }
      }

    }
  }
}
